<template>
    <div class="app-container">
        <div class="filter-container">
            <el-checkbox v-model="listQuery.latestVersion">最新版本</el-checkbox>
        </div>
        <div class="filter-container">
            <el-input v-model="listQuery.modelKey" placeholder="模型key" style="width: 200px;" class="filter-item" @keyup.enter.native="btnQuery" />
            <el-input v-model="listQuery.modelName" placeholder="模型名称" style="width: 200px;" class="filter-item" @keyup.enter.native="btnQuery" />
            <el-select v-model="listQuery.modelCategory" placeholder="模型类别" class="filter-item">
                <el-option v-for="(item, index) in dicts.processCategory" :key="index" :label="item.content" :value="item.value"></el-option>
            </el-select>

            <el-dropdown split-button type="primary" @click="btnQuery" class="filter-item">
                <i class="el-icon-search el-icon--left"></i>查询
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-zoom-out" @click.native="btnReset">重置</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <el-button-group>
                <el-button v-permission="'flowable:model:save'" icon="el-icon-plus" type="primary" @click="btnCreate" class="filter-item">新增
                </el-button>
                <el-button v-permission="'flowable:model:import'" icon="el-icon-plus" type="primary" @click="btnImport" class="filter-item">导入
                </el-button>
                <!--<el-button v-permission="'flowable:model:delete'" icon="el-icon-delete" @click="btnDelete()"
                           class="filter-item">批量删除
                </el-button>-->
            </el-button-group>
        </div>
        <el-table :data="records" ref="multipleTable" @selection-change="selectionChange" border fit highlight-current-row style="width: 100%;margin-bottom: 10px">
            <el-table-column type="selection" align="center">
            </el-table-column>
            <el-table-column label="模型key" prop="key" align="center">
                <template slot-scope="scope"><span>{{ scope.row.key }}</span></template>
            </el-table-column>
            <el-table-column label="模型名称" prop="name" align="center">
                <template slot-scope="scope"><span>{{ scope.row.name }}</span></template>
            </el-table-column>
            <el-table-column label="模型类别" prop="category" align="center">
                <template slot-scope="scope">
                    <span v-html="formatDictText(dicts.processCategory,scope.row.category)"></span>
                </template>
            </el-table-column>
            <el-table-column label="版本" prop="version" align="center">
                <template slot-scope="scope"><span>{{ scope.row.version }}</span></template>
            </el-table-column>
            <el-table-column label="是否发布" prop="deployed" align="center">
                <template slot-scope="scope"><span>{{ scope.row.deployed?'是':'否' }}</span></template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="80">
                <template slot-scope="{row}">
                    <el-dropdown>
                        <i class="el-icon-more dropdown-more-icon"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item icon="el-icon-view" @click.native="btnView(row)">查看</el-dropdown-item>
                            <!--<el-dropdown-item v-permission="'flowable:model:update'" icon="el-icon-edit" divided
                                              @click.native="btnUpdate(row)">修改
                            </el-dropdown-item>-->
                            <el-dropdown-item v-permission="'flowable:model:copy'" icon="el-icon-edit" divided @click.native="btnCopy(row)">复制
                            </el-dropdown-item>
                            <el-dropdown-item v-permission="'flowable:model:saveModelEditor'" icon="el-icon-edit" divided @click.native="btnUpdateModel(row)">流程设计
                            </el-dropdown-item>
                            <el-dropdown-item v-permission="'flowable:model:delete'" icon="el-icon-delete" divided @click.native="btnDelete(row.id)">删除
                            </el-dropdown-item>
                            <el-dropdown-item v-permission="'flowable:model:delete'" icon="el-icon-delete" divided @click.native="btnDelete(row.id,true)">删除包含历史
                            </el-dropdown-item>
                            <el-dropdown-item v-if="!row.deployed" v-permission="'flowable:model:deploy'" icon="el-icon-edit" divided @click.native="btnDeploy(row.id)">发布
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :current.sync="listQuery.current" :size.sync="listQuery.size" @pagination="list" />

        <el-dialog title="流程模型" :visible.sync="dialogFormVisible">
            <el-form ref="dataForm" :rules="rules" :model="temp" :disabled="dialogStatus==='view'" label-position="right" label-width="110px">
                <!-- <el-form-item label="模型key" prop="key">
					<el-input v-model="temp.key" @input="elInputClick" />
				</el-form-item> -->
                <el-form-item label="模型名称" prop="name">
                    <el-input v-model="temp.name" />
                </el-form-item>
                <el-form-item label="模型类别" prop="category">
                    <el-select v-model="temp.category" placeholder="模型类别" @change="categoryChoose">
                        <el-option v-for="item in dicts.processCategory" :key="item.value" :label="item.content" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="模型描述" prop="description">
                    <el-input v-model="temp.description" />
                </el-form-item>
                <!-- <el-form-item label="租户ID" prop="tenantId">
					<el-input v-model="temp.tenantId" />
				</el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button icon="el-icon-close" @click="dialogFormVisible = false">取消</el-button>
                <el-button v-if="dialogStatus!=='view'" icon="el-icon-check" type="primary" @click="dialogStatus==='create'?createData():updateData()">确定
                </el-button>
            </div>
        </el-dialog>

        <el-dialog title="流程导入" :visible.sync="dialogImportVisible">
            <!--<div class="filter-container">
                <el-input v-model="importTenantId" placeholder="租户" clearable style="width: 200px;"/>
            </div>-->
            <el-upload class="upload-demo" drag action :show-file-list="false" :before-upload="beforeUpload" :http-request="doImport">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传.bpmn20.xml,.bpmn文件，且不超过512K</div>
            </el-upload>
        </el-dialog>
    </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import { deleteAction, getAction, postAction, putAction } from "@/api/manage";
import { Message } from "element-ui";

export default {
    name: "FlowableModel",
    components: {
        Pagination,
    },
    data() {
        return {
            dicts: [],
            records: null,
            selectedRecords: [],
            total: 0,
            listQuery: {
                current: 1,
                size: 10,
                modelKey: undefined,
                latestVersion: true,
                modelName: undefined,
                modelCategory: undefined,
            },
            dialogFormVisible: false,
            dialogStatus: "",
            temp: {
                id: undefined,
                key: "",
                name: "",
                category: "",
                description: "",
                tenantId: 10200,
            },
            rules: {
                id: [
                    {
                        required: true,
                        message: "该项不能为空",
                        trigger: "change",
                    },
                ],
                key: [
                    {
                        required: true,
                        message: "该项不能为空",
                        trigger: "change",
                    },
                ],
                name: [
                    {
                        required: true,
                        message: "该项不能为空",
                        trigger: "change",
                    },
                ],
                category: [
                    {
                        required: true,
                        message: "该项不能为空",
                        trigger: "change",
                    },
                ],
            },
            dialogImportVisible: false,
            categoryKey: "",
        };
    },
    beforeCreate() {
        this.getDicts("processCategory,taskCategory").then(({ data }) => {
            this.dicts = data;
        });
    },
    created() {
        this.list();
        this.temp.key = this.getUUID();
        console.log("5555555555555555555555555555555555");
        console.log(this.temp.key);
    },
    methods: {
        // getUUID() {
        //      var s = []
        // 	 var hexDigits = "0123456789abcdef"
        // 	 for (var i = 0; i < 36; i++) {
        //   		s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
        // 	}
        // 	s[14] = "4"
        // 	s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1)
        // 	s[8] = s[13] = s[18] = s[23] = "-"
        // 	var uuid = s.join("")
        // 	return uuid
        // },
        getUUID() {
            var d = new Date().getTime();
            var uuid = "xxxxxxxx-xxxx".replace(/[xy]/g, function (c) {
                var r = (d + Math.random() * 16) % 16 | 0;
                d = Math.floor(d / 16);
                return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
            });
            return uuid;
        },
        list() {
            getAction("/flowable/model/list", this.listQuery).then((res) => {
                const { data } = res;
                this.records = data.records;
                this.total = data.total;
            });
        },
        btnQuery() {
            this.listQuery.current = 1;
            this.list();
        },
        btnReset() {
            this.listQuery = {
                current: 1,
                size: 10,
                modelKey: undefined,
                latestVersion: true,
                modelName: undefined,
                modelCategory: undefined,
            };
            this.list();
        },
        resetTemp() {
            this.temp = {
                id: undefined,
                key: this.getUUID(),
                name: "",
                category: "",
                description: "",
                tenantId: 10200,
            };
        },
        btnView(row) {
            this.temp = Object.assign({}, row);
            this.dialogStatus = "view";
            this.dialogFormVisible = true;
            this.$nextTick(() => {
                this.$refs["dataForm"].clearValidate();
            });
        },
        btnCreate() {
            this.resetTemp();
            this.dialogStatus = "create";
            this.dialogFormVisible = true;
            this.$nextTick(() => {
                this.$refs["dataForm"].clearValidate();
            });
            console.log(this.temp.key);
        },
        btnImport() {
            this.dialogImportVisible = true;
        },
        beforeUpload(file) {
            // 上传前格式与大小校验
            const fileName = file.name;
            const isFileTypeOk =
                fileName.endsWith(".bpmn20.xml") ||
                fileName.endsWith(".bpmn") ||
                fileName.endsWith(".bar") ||
                fileName.endsWith(".zip");
            const isLt512 = file.size / 1024 / 512 < 1;
            if (!isFileTypeOk) {
                Message.error("上传文件格式不正确");
            }
            if (!isLt512) {
                Message.error("上传文件大小不能超过512K");
            }
            return isFileTypeOk && isLt512;
        },
        doImport(fileObj) {
            let formData = new FormData();
            formData.set("file", fileObj.file);
            // formData.set("tenantId", this.importTenantId);
            postAction("/flowable/model/import", formData).then(({ msg }) => {
                this.dialogImportVisible = false;
                Message.success(msg);
                this.list();
            });
        },
        createData() {
            this.$refs["dataForm"].validate((valid) => {
                if (valid) {
                    postAction("/flowable/model/save", this.temp).then(
                        ({ msg }) => {
                            this.dialogFormVisible = false;
                            Message.success(msg);
                            this.list();
                        }
                    );
                }
            });
        },
        btnUpdate(row) {
            this.temp = Object.assign({}, row);
            this.dialogStatus = "update";
            this.dialogFormVisible = true;
            this.$nextTick(() => {
                this.$refs["dataForm"].clearValidate();
            });
        },
        btnCopy(row) {
            putAction("/flowable/model/copy", {
                id: row.id,
            }).then(({ msg }) => {
                Message.success(msg);
                this.list();
            });
        },
        btnUpdateModel(row) {
            this.$router.push({
                path: "/flowableModelEdit",
                query: {
                    id: row.id,
                    isView: row.deployed,
                },
            });
        },
        updateData() {
            this.$refs["dataForm"].validate((valid) => {
                if (valid) {
                    putAction("/flowable/model/update", this.temp).then(
                        ({ msg }) => {
                            this.dialogFormVisible = false;
                            Message.success(msg);
                            this.list();
                        }
                    );
                }
            });
        },
        btnDelete(id, cascade) {
            let ids = id
                ? [id]
                : this.selectedRecords.map((record) => {
                      return record.id;
                  });
            if (ids.length == 0) {
                Message.error("请选择要删除的记录");
                return;
            }
            deleteAction("/flowable/model/delete", {
                ids: ids.toString(),
                cascade,
            }).then(({ msg }) => {
                Message.success(msg);
                this.list();
            });
        },
        btnDeploy(id) {
            postAction("/flowable/model/deploy", {
                id,
            }).then(({ msg }) => {
                Message.success(msg);
                this.list();
            });
        },
        selectionChange(selectedRecords) {
            this.selectedRecords = selectedRecords;
        },
        categoryChoose(data) {
            console.log(data);
            this.categoryKey = data;
            if (data) {
                if (this.temp.key.indexOf("-") == -1) {
                    this.temp.key = this.categoryKey + "-" + this.temp.key;
                } else {
                    this.temp.key =
                        this.categoryKey +
                        "-" +
                        this.temp.key.slice(this.temp.key.indexOf("-") + 1);
                }
            } else {
                if (this.temp.key.indexOf("-") != -1) {
                    this.temp.key = this.temp.key.slice(
                        this.temp.key.indexOf("-") + 1
                    );
                }
            }
        },
        elInputClick(data) {
            if (this.categoryKey) {
                if (this.temp.key.indexOf("-") == -1) {
                    console.log(data);
                    if (this.categoryKey == data) {
                        this.temp.key = this.categoryKey + "-";
                    } else {
                        this.temp.key = this.categoryKey + "-" + data;
                    }
                } else {
                    this.temp.key =
                        this.categoryKey +
                        "-" +
                        this.temp.key.slice(this.temp.key.indexOf("-") + 1);
                }
            } else {
                if (this.temp.key.indexOf("-") != -1) {
                    this.temp.key = this.temp.key.slice(
                        this.temp.key.indexOf("-") + 1
                    );
                }
            }
        },
    },
};
</script>
